<!--  -->
<template>
  <div>

  <ElderlyDetail></ElderlyDetail>
 
    <el-card style="margin-top: 20px;">

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="id" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column label="文件">

          <template #default="scope">

            <div v-for="item in scope.row.files">

              <el-dropdown @command="(command: string) => handleCommand(command, item.fileName)" placement="bottom">
                {{ item.fileName }}
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="preview">预览</el-dropdown-item>
                    <el-dropdown-item command="download">下载</el-dropdown-item>
                    <el-dropdown-item command="delete">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>


            </div>

          </template>

        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">

            <el-upload class="avatar-uploader" :action="action" :show-file-list="false"
              :on-success="(response: any) => handleAvatarSuccess(response, scope.row.name)">
              <el-button link type="primary">上传</el-button>
            </el-upload>



          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- <PdfViewer @close="closeHandle" v-if="dialogVisible" :fileUrl="fileUrl"></PdfViewer> -->
    <!-- <ImgViewer @close="closeHandle" v-if="dialogVisible" :fileUrl="fileUrl"></ImgViewer> -->

    <component @close="closeHandle" v-if="dialogVisible" :fileUrl="fileUrl" :is="fileView[fileType]"></component>

  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { getFileItems } from '../../apis/elderly/elderly';
import { getElderlyFiles } from '../../apis/elderly/elderly';

import { useRoute } from 'vue-router';
import { UploadFile, UploadFiles, UploadProps } from 'element-plus';
import { ElderlyRecord } from '../../apis/elderly/type';
import { elderlyFilesAdd } from '../../apis/elderly/elderly';

import PdfViewer from '../../components/viewfile/PdfViewer.vue';
import ShowPdf from '../../components/viewfile/ShowPdf.vue';

import ImgViewer from '../../components/viewfile/ImgViewer.vue';


import { download } from '../../utils/downLoadUtil';
import ElderlyDetail from '../../components/elderly/ElderlyDetail.vue';


const fileView: Record<string, any> = {
  pdf: PdfViewer,
  pdf2:ShowPdf,
  img: ImgViewer
}
const fileType = ref<string>("pdf");



const route = useRoute();

const action = import.meta.env.VITE_API_BASE_URL + '/api/upload/add';


const tableData = ref([]);

const formData = reactive<ElderlyRecord>({
  elderlyId: Number(route.query.id),
  name: "",
  fileName: ""
})
const dialogVisible = ref(false)
const fileUrl = ref("");
const closeHandle = () => {
  dialogVisible.value = false;
}

const handleCommand = (command: string, fileName: string) => {

  if (command == "preview") {

    fileUrl.value = fileName;
    dialogVisible.value = true;
    let file_type = fileName.split(".").pop();

    switch (file_type) {
      case "pdf":
        // fileType.value = "pdf";
        fileType.value = "pdf2";
        break;
      case "png":
      case "jpg":
      case "jpeg":
      case "gif":
      case "bmp":
      case "webp":
        fileType.value = "img";
        break;
      case "txt":
        fileType.value = "txt";
      default:
        break;
    }


    //  if(file_type=="pdf"){
    //   fileType.value="pdf";
    //  }
    //  if(file_type=="png"||file_type=="jpg"||file_type=="jpeg"){
    //   fileType.value="img";
    //  }
    //  if(file_type=="doc"||file_type=="docx"){

    //  }


  }
  else if(command=="download"){
    download(fileName);
  }







}

const getData = async () => {

  const items = await getFileItems();
  const fileList = await getElderlyFiles(formData.elderlyId);

  tableData.value = items.data.list.map((item: any) => ({ ...item, files: fileList.data.list.filter((item2: any) => item2.name == item.name) }));




}

getData();

const fileAdd = async () => {
  const res = await elderlyFilesAdd(formData);
  getData();

}

const handleAvatarSuccess: any = (
  response: any, name: string
) => {



  console.log("name", name);
  // console.log("uploadFile",uploadFile);
  console.log("response", response);
  // console.log("uploadFiles",uploadFiles);


  if (response.code === 10000) {
    formData.fileName = response.data.url;
    formData.name = name;
    fileAdd();

  }

}



</script>
<style scoped></style>